<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"  @click.native ="back">
			<block slot="backText">返回</block>
			<block slot="content">编辑基本信息</block>
		</cu-custom>
		<form>
			<div style="font-weight: bold;height:20px;line-height: 20px;margin-top: 10px;">内心独白</div>
			<view class="cu-form-group margin-top">
				<textarea maxlength="-1" :disabled="modalName!=null" v-model="userSoliloquy" @input="textareaAInput" placeholder="内心独白"></textarea>
			</view>
			
			<div style="font-weight: bold;height:20px;line-height: 20px;margin-top: 10px;">基本信息</div>
			<view class="cu-form-group margin-top">
				<view class="title">昵称</view>
				<input placeholder="昵称" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">年龄</view>
				<input placeholder="年龄" name="input" v-model="userAge"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">居住地</view>
				<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
					<view class="picker">
						{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">身高</view>
				<picker @change="heightPickerChange" :value="heightIndex" :range="heightPicker">
					<view class="picker">
						{{heightIndex>-1?heightPicker[heightIndex]:'身高'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">学历</view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{index>-1?picker[index]:'学历'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">星座</view>
				<picker @change="consPickerChange" :value="consIndex" :range="consPicker">
					<view class="picker">
						{{consIndex>-1?consPicker[consIndex]:'星座'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">属相</view>
				<picker @change="zodPickerChange" :value="zodIndex" :range="zodPicker">
					<view class="picker">
						{{zodIndex>-1?zodPicker[zodIndex]:'属相'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">血型</view>
				<picker @change="bloodPickerChange" :value="bloodIndex" :range="bloodPicker">
					<view class="picker">
						{{bloodIndex>-1?bloodPicker[bloodIndex]:'血型'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">民族</view>
				<picker @change="nationPickerChange" :value="nationIndex" :range="nation">
					<view class="picker">
						{{nationIndex>-1?nation[nationIndex]:'民族'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">体重</view>
				<picker @change="weightPickerChange" :value="index" :range="weightPicker">
					<view class="picker">
						{{weightIndex>-1?weightPicker[weightIndex]:'体重'}}
					</view>
				</picker>
			</view>
			<button @click="back()">保存</button>
			
		</form>
	</view>
</template>

<script>
	
	import { saveData } from '../../common/api/userDetails/userDetails.js' 
	import { Global } from '../../common/global.js'
	import Vue from 'vue'
	/*引入资源请求插件*/
	import VueResource from 'vue-resource'
	/*使用VueResource插件*/
	Vue.use(VueResource)
	
	
	export default {
		data() {
			return {
				userSoliloquy:'',
				userAge:'',
				form:{},
				// userAddress:[],
				// userEducation:'',
				// userConstellation:'',
				// userZodiac:'',
				// userBooldType:'',
				// userNation:'',
				// userWeigth:'',
				// userHeigth:'',
				index: -1,
				consIndex: -1,
				zodIndex: -1,
				bloodIndex:-1,
				nationIndex:-1,
				weightIndex:-1,
				heightIndex:-1,
				picker: ['大专以下', '大专', '本科','硕士','博士'],
				consPicker:['摩羯座','水瓶座','双鱼座','白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座'],
				zodPicker:['鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪'],
				nation:["汉族","蒙古族","回族","藏族","维吾尔族","苗族","彝族","壮族","布依族","朝鲜族","满族","侗族","瑶族","白族","土家族",  
					   "哈尼族","哈萨克族","傣族","黎族","傈僳族","佤族","畲族","高山族","拉祜族","水族","东乡族","纳西族","景颇族","柯尔克孜族",  
					   "土族","达斡尔族","仫佬族","羌族","布朗族","撒拉族","毛南族","仡佬族","锡伯族","阿昌族","普米族","塔吉克族","怒族", "乌孜别克族",  
					  "俄罗斯族","鄂温克族","德昂族","保安族","裕固族","京族","塔塔尔族","独龙族","鄂伦春族","赫哲族","门巴族","珞巴族","基诺族"],
				bloodPicker:['A','B','AB','O'],
				weightPicker:[],
				heightPicker:[],
				modalName: null,
				textareaAValue: '',
				multiArray: [
					['北京','天津','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海','江苏省','浙江省','安徽省','福建省','江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区',
					'海南省','重庆','四川省','贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区','台湾','香港特别行政区','澳门特别行政区'],
					['北京市']
				],
				multiArray2: [
					['北京市'],
					['天津市'],
					['石家庄市','唐山市','秦皇岛市','邯郸市','邢台市','保定市','张家口市','承德市','沧州市','廊坊市','衡水市'],
					['太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市'],
					['呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市','兴安盟','锡林郭勒盟','阿拉善盟'],
					['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','盘锦市','朝阳市','葫芦岛市'],
					['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边'],
					['哈尔滨市','齐齐哈尔市','鸡西市','鹤岗市','双鸭山市','大庆市','伊春市','佳木斯市','七台河市','牡丹江市','黑河市','绥化市','大兴安岭地区'],
					['上海市'],
					['南京市','无锡市','徐州市','常州市','苏州市','南通市','连云港市','淮安市','盐城市','扬州市','镇江市','泰州市','宿迁市'],
					['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市'],
					['合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','六安市','亳州市','池州市','宣城市'],
					['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市'],
					['南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市'],
					['济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市'],
					['郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','济源市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市'],
					['武汉市','黄石市','十堰市','宜昌市','襄阳市','鄂州市','荆门市','孝感市','荆州市','黄冈市','咸宁市','随州市','恩施','仙桃市','潜江市','天门市','神农架林区'],
					['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市','湘西'],
					['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','东沙群岛','潮州市','揭阳市','云浮市'],
					['南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市'],
					['海口市','三亚市','三沙市','五指山市','琼海市','儋州市','文昌市','万宁市','东方市','定安县','屯昌县','澄迈县','临高县','白沙','昌江','乐东','陵水','保亭','琼中'],
					['重庆市'],
					['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市','阿坝','甘孜','凉山'],
					['贵阳市','六盘水市','遵义市','安顺市','铜仁市','黔西南','毕节市','黔东南','黔南'],
					['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市','楚雄','红河','文山','西双版纳','大理','德宏','怒江','迪庆'],
					['拉萨市','昌都地区','山南地区','日喀则地区','那曲地区','阿里地区','林芝地区'],
					['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市'],
					['兰州市','嘉峪关市','金昌市','白银市','天水市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市','临夏','甘南'],
					['西宁市','海东市','海北','黄南','海南','果洛','玉树','海西'],
					['银川市','石嘴山市','吴忠市','固原市','中卫市'],
					['乌鲁木齐市','克拉玛依市','吐鲁番地区','哈密地区','昌吉','博尔塔拉','巴音郭楞','阿克苏地区','克孜勒苏柯尔克孜自治州','喀什地区','和田地区','伊犁','塔城地区','阿勒泰地区','石河子市','阿拉尔市','图木舒克市','五家渠市'],
					['台北市','高雄市','台南市','台中市','金门县','南投县','基隆市','新竹市','嘉义市','新北市','宜兰县','新竹县','桃园县','苗栗县','彰化县','嘉义县','云林县','屏东县','台东县','花莲县','澎湖县','连江县'],
					['香港岛','新界','九龙'],
					['澳门','离岛']
				],
				multiIndex: [0, 0]
			};
		},
		mounted(){
			this.wightArray()
			this.heightArray()
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
			},
			consPickerChange(e) {
				this.consIndex = e.detail.value
			},
			zodPickerChange(e) {
				this.zodIndex = e.detail.value
			},
			bloodPickerChange(e) {
				this.bloodIndex = e.detail.value
			},
			nationPickerChange(e) {
				this.nationIndex = e.detail.value
			},
			weightPickerChange(e) {
				this.weightIndex = e.detail.value
			},
			heightPickerChange(e) {
				this.heightIndex = e.detail.value
			},
			RegionChange(e) {
				this.region = e.detail.value
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},wightArray(){
				for (let i = 30; i < 100; i++) {
					this.weightPicker.push(i+'公斤')
				}
				this.weightPicker.push('其他')
			},
			heightArray(){
				for (let i = 110; i < 200; i++) {
					this.heightPicker.push(i+'cm')
				}
				this.heightPicker.push('其他')
			},
			MultiChange(e) {
				this.multiIndex = e.detail.value
			},
			MultiColumnChange(e) {
				let data = {
					multiArray: this.multiArray,
					multiIndex: this.multiIndex,
					multiArray2: this.multiArray2
				};
				data.multiIndex[e.detail.column] = e.detail.value;
				(data.multiArray)[1]=(data.multiArray2)[data.multiIndex[0]];
				this.multiArray = data.multiArray;
				this.multiIndex = data.multiIndex;
			},back(){
				const random = Math.ceil(Math.random()*10);
				this.form={
					userId:random,
					userAge:this.userAge,
					userSoliloquy:this.userSoliloquy,
					userAddress:this.multiIndex.join(','),
					userEducation:this.index,
					userConstellation:this.consIndex,
					userZodiac:this.zodIndex,
					userBooldType:this.bloodIndex,
					userNation:this.nationIndex,
					userWeigth:this.weightIndex,
					userHeigth:this.heightIndex
					}
				this.$http.post(
					`http://${Global.server_base_url}:${Global.server_base_port}/user/save`,
					this.form,
					{
						emulateJson: true
					}).then(function(result) {
					// 通过result.body拿到服务器返回的成功的数据
					console.log(result)
					// console.log(result.data)
					// console.log(result.body)
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
